<template>
	<div class="index">
		<div class="banner"><img src="../assets/banner-image.jpg" /></div>
		<div class="blogCon">
			<ul>
				<li v-for="i in blogList">
					<h4>{{i.title}}</h4>
					<span class="labels" v-for="(t,index) in i.label" :style="{backgroundColor:labesColor[index]}">{{t}}</span>
					<p class="intro">{{i.intro}}</p>
					<div class="bot">
						<span>作者：{{i.author}}</span>
						<span>发布时间：{{i.pubTime}}</span>
						<router-link to="/"  class="readMore">阅读全文</router-link>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default{
		name:'Index',
		data(){
			return{
				blogList:[{
					id:1,title:'这是展示的标题',label:['ajax','vue','koa'],intro:'这是博文的文章的简介这是博文的文章的，简介这是博文的。文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介',pubTime:'2018-10-11',author:'May五月',
				},{
					id:1,title:'这是展示的标题',label:['ajax','vue','koa'],intro:'这是博文的文章的简介这是博文的文章的，简介这是博文的。文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介',pubTime:'2018-10-11',author:'May五月',
				},{
					id:1,title:'这是展示的标题',label:['ajax','vue','koa'],intro:'这是博文的文章的简介这是博文的文章的，简介这是博文的。文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介',pubTime:'2018-10-11',author:'May五月',
				},{
					id:1,title:'这是展示的标题',label:['ajax','vue','koa'],intro:'这是博文的文章的简介这是博文的文章的，简介这是博文的。文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介文章的简介这是博文的文章的简介',pubTime:'2018-10-11',author:'May五月',
				}],
				labesColor:['#227652','#fde36c','#e38f15']
			}
		}
	}
</script>
<style scoped>
	.index{
		
	}
	.banner{
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		height:450px;
	}
	.banner img{
		width: 100%;
		
	}
	.blogCon{
		width: 800px;
		margin: 0 auto;
		padding: 20px 0;
	}
	.blogCon ul li{
		background-color: #fff;
		line-height: 25px;
		box-shadow: 2px 2px 2px #ccc;
		margin-top: 15px;
		border-radius: 5px;
		padding: 10px 15px;
	}
	.blogCon ul li .labels{
		display: inline-block;
		padding: 0 20px;
		line-height: 30px;
		border-radius: 5px; 
		margin-right: 15px;
		color: #cccccc;
	}
	.blogCon h4{
		font-size: 18px;
		line-height: 35px;
	}
	.intro{
		margin-top: 15px;
	}
	.bot{
		font-size: 10px;
	}
	.bot span{
		margin-right: 30px;
	}
	.bot .readMore{
		float: right;
		display: inline-block;
		line-height: 20px;
		border: 1px solid #227652;
		border-radius: 2px;
		padding: 0 10px;
	}
</style>